<template>
	<view>
		<!-- <view class="top_t_list" v-if="is_show">
			<view style="height: 88rpx;"></view>
			<view>
				<image class="left_img" src="../../static/image/back_left.png" mode=""></image>
			</view>
		</view> -->

		<view class="top">
			<map id="map_container" :latitude="myla" :longitude="mylo" :markers="markers" :polyline="polyline"
				:show-location="true" class="map" :circles="circles">
				<cover-view slot="callout">
					<block v-for="(item,index) in markers" :key="index">
						<cover-view class="customCallout" :marker-id="item.id">
							<cover-view class="content">
								<cover-view style="display: flex;font-size: 24rpx;"> <cover-view>距车辆</cover-view>
									<cover-view
										style="margin: 0 2rpx;font-size: 24rpx;color: #4281FF;">{{info.Destination.km}}</cover-view>
									<cover-view>km</cover-view> </cover-view>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</map>
			<!-- <image class="b_img" :src="url+'/logo.png'" mode=""></image> -->
			<navigator open-type="navigateBack">
				<image class="s_img" :src="url+'/image/comeback.png'" mode=""></image>
			</navigator>
		</view>
		<view class="bottom">
			<view class="back bottom_a" style="padding-bottom: 0;">
				<view class=" bor_bot">
					<view class="black_f_40 font_w_bold bor_b_16">预计<text class="blue_f_40">14:30</text>送达</view>
					<view class="black_s_28">接单员正在赶往您的位置，预计<text class="blue_f_28">5分钟</text>内到达</view>
				</view>
			</view>
			<view class="bott_b">
				<view class="back bottom_b dis_f_sb bor_bot">
					<image class="b_img" :src="url+'/logo.png'" mode=""></image>
					<view class="bo_b_r">
						<view>
							<view class="black_f_32 font_w_bold slh_one bor_b_16">小牛电动 B0都市版新国标...</view>
							<view class="dis_f_sb_c">
								<view class="grey_f_28">2021新款;220V</view>
								<view class="black_f_28">x1</view>
							</view>
						</view>
						<view class="black_f_28 dis_f_r_c">￥50.25</view>
					</view>
				</view>
				<view class="back bottom_c bor_bot dis_f_sb_c">
					<image class="sh_img" :src="url+'/image/shback.png'" mode=""></image>
					<view class="dis_f_l_c">
						<image class="tx_img" :src="url+'/logo.png'" mode=""></image>
						<view>
							<view class="mar_b_8 black_f_32 font_w_bold">同路仁接单员</view>
							<view>
								<u-rate readonly allowHalf="true" size="14" activeColor="#FF6401"
									inactiveColor="#F7F7F7" :count="count" v-model="value"></u-rate>
							</view>
						</view>
					</view>
					<view class="bo_c_r">
						<image class="call_img" :src="url+'/image/call.png'" mode=""></image>
						<view class="grey_f_24">电话联系</view>
					</view>
				</view>
				<view class="back bottom_c bor_bot">
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">取货单号</view>
						<view class="black_f_28">#012</view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">预计送达时间</view>
						<view class="black_f_28">20:30 前</view>
					</view>
					<view class="dis_f_sb_c">
						<view class="black_s_28">买家留言</view>
						<view class="black_f_28">留言详情留言详情留言详情</view>
					</view>
				</view>
				<view class="back bottom_c bor_bot">
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">商品金额</view>
						<view class="black_f_28">￥200.05</view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">优惠</view>
						<view class="black_f_28">￥0.00</view>
					</view>
					<view class="dis_f_sb_c">
						<view class="black_s_28">合计</view>
						<view class="orange_f_28">￥2200.05</view>
					</view>
				</view>
				<view class="back bottom_c bor_bot">
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">订单编号</view>
						<view class="black_f_28"><text class="mar_r_16">20225113215554</text>
							<text class="blue_f_28" @click="copy()">复制</text>
						</view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">创建时间</view>
						<view class="black_f_28">2022-02-10 20:30:56</view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">付款时间</view>
						<view class="black_f_28">2022-02-10 20:31:26</view>
					</view>
					<view class="dis_f_sb_c">
						<view class="black_s_28">发货时间</view>
						<view class="black_f_28">2022-02-10 20:32:26</view>
					</view>
				</view>
				<image class="bo_js_er_img" :src="url+'/image/zcxian.png'" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import amap from "@/amap-wx.130.js";
	export default {
		data() {
			return {
				title: "物流详情",
				count: 5,
				value: 3.5,
				order: "20225113215554",
				is_show: false,
				key: "1736dd18a297e467c119fb19bd9bb0c7",
				amapPlugin: null,
				latitude: 35.408925,
				longitude: 116.596165,
				mapInfo: [],
				markers: [],
				circles: [

				],
				polyline: [],
				mylo: '',
				myla: '',
				mapContext: '',
				url:'',
			}
		},
		onLoad() {
			this.url=this.$.ajax_url3
			// this.url=this.$.ajax_url3
			this.amapPlugin = new amap.AMapWX({
				key: this.key //该key 是在高德中申请的微信小程序key
			});
			this.cshLo()
			this.mapContext = uni.createMapContext("map_container", this) // 这个'map'名字要跟map组件的id要同名，才能拿到map组件，调用它的一些API

		},
		methods: {
			cshLo() {
				let app = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						app.myla = res.latitude
						app.mylo = res.longitude
						console.log('当前位置的纬度：' + res.latitude);
						app.loac()
					},
					fail(err) {
						console.log(err, 'err');
					}
				});


			},
			loac() {
				let self = this;
				console.log(this.info, 'this.info.vehicle');
				let a = this.mylo + ',' + this.myla
				let b = 116.397128 + ',' + 39.916527
				console.log(a, b);
				this.amapPlugin.getDrivingRoute({
					origin: a,
					destination: b,
					success: (data) => {
						console.log(data.paths[0].steps, 'aaa');
						const points = data.paths[0].steps.map(step => {
							return step.polyline.split(';').map(coord => {
								const [longitude, latitude] = coord.split(',');
								return {
									longitude: parseFloat(longitude),
									latitude: parseFloat(latitude)
								};
							});
						}).flat();
						// 获取第一个和最后一个经纬度点
						const firstPoint = points[0];
						const lastPoint = points[points.length - 1];
						// 更新circles数组
						this.circles = [
							// 起点圆
							{
								latitude: firstPoint.latitude,
								longitude: firstPoint.longitude,
								color: '#3377FF',
								fillColor: '#ffffff',
								radius: 1,
								strokeWidth: 2
							},
							// 终点圆
							{
								latitude: lastPoint.latitude,
								longitude: lastPoint.longitude,
								color: '#3377FF',
								fillColor: '#ffffff',
								radius: 1,
								strokeWidth: 2
							}
						];
						let app = this

						// 更新markers数组
						this.markers = [
							// 终点标记
							{
								id: 1,
								width: 100,
								height: 37,
								latitude: lastPoint.latitude,
								longitude: lastPoint.longitude,
								iconPath: '/static/image/shd.png', // 自定义终点图标路径
								title: '终点',
								joinCluster: true
							},
							{
								id: 2,
								width: 100,
								height: 37,
								latitude: this.latitude,
								longitude: this.longitude,
								iconPath: '/static/image/fhd.png', // 自定义终点图标路径
								title: '11',
								joinCluster: true,
								customCallout: {
									anchorY: 0,
									anchorX: 0,
									display: "ALWAYS"
								}
							}
						];
						let points2 = [{
								latitude: this.markers[0].latitude,
								longitude: this.markers[0].longitude,
							},
							{
								latitude: this.markers[1].latitude,
								longitude: this.markers[1].longitude,
							}
						]
						setTimeout(() => {
							this.includePointsFn(points2)
						}, 1000)


						// 更新polyline数组
						this.polyline = [{
							points: points,
							color: "#3377FF",
							width: 7,
							dottedLine: false
						}];
						console.log('this.circles', this.circles);
					},
					fail: (info) => {
						console.log(info, 'bbb');
					}
				});
			},
			// 缩放视野
						includePointsFn(points) {
							this.mapContext.includePoints({
								padding: [80, 50, 80, 50],
								points: points
							})
						},

			go_view(url) {
				uni.navigateTo({
					url: url
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.order
				});
			}
		}
	}
</script>

<style lang="scss">
	.top {
		position: relative;

		.map {
			height: 916rpx;
			width: 100%;

			.customCallout {
				padding: 8rpx 24rpx;
				width: 190rpx;
				height: 56rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
			}

			.content {
				flex: 0 1 auto;
				font-size: 24rpx;
				color: #00091A;
			}

			span {
				font-size: 24rpx;
				color: #4281FF;
			}
		}

		.b_img {
			width: 750rpx;
			height: 916rpx;
			background: linear-gradient(to bottom, #FFFFFF 86%, rgba(255, 255, 255, 0) 100%);
			position: absolute;
			top: 0;
			left: 0;
		}

		.s_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 112rpx;
			left: 32rpx;
		}
	}

	.bottom {
		position: relative;
		// top: 916rpx;
		left: 0;
		padding: 0 32rpx;

		.bottom_a {
			position: absolute;
			top: -140rpx;


			.r_img {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.bott_b {
			position: absolute;
			top: 40rpx;
		}

		.bottom_b {
			.b_img {
				width: 200rpx;
				height: 200rpx;
			}

			.bo_b_r {
				width: 414rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.bottom_c {
			padding: 32rpx 24rpx;
			position: relative;
		}

		.sh_img {
			width: 144rpx;
			height: 160rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.tx_img {
			width: 96rpx;
			height: 96rpx;
			border-radius: 100rpx;
			margin-right: 16rpx;
		}

		.call_img {
			width: 48rpx;
			height: 48rpx;
		}

		.bo_c_r {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			right: 24rpx;
			top: 28rpx;
		}
	}

	.top_t_list {
		width: 750rpx;
		height: 176rpx;
		background-color: #F7FAFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.left_img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 32rpx;
		margin-top: 24rpx;
	}
</style>